<template>
  <el-card
    shadow="never"
    header="修改密码"
  >
    <el-alert
      title="密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。"
      type="info"
      show-icon
      style="margin-bottom: 15px;"
    />
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      style="margin-top:20px;"
    >
      <el-form-item
        label="当前密码"
        prop="userPassword"
      >
        <el-input
          v-model="form.userPassword"
          type="password"
          show-password
          placeholder="请输入当前密码"
        />
        <div class="el-form-item-msg">
          必须提供当前登录用户密码才能进行更改
        </div>
      </el-form-item>
      <el-form-item
        label="新密码"
        prop="newPassword"
      >
        <el-input
          v-model="form.newPassword"
          type="password"
          show-password
          placeholder="请输入新密码"
        />
        <sc-password-strength v-model="form.newPassword" />
        <div class="el-form-item-msg">
          请输入包含英文、数字的8位以上密码
        </div>
      </el-form-item>
      <el-form-item
        label="确认新密码"
        prop="confirmNewPassword"
      >
        <el-input
          v-model="form.confirmNewPassword"
          type="password"
          show-password
          placeholder="请再次输入新密码"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="save"
        >
          保存密码
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import scPasswordStrength from '@/components/scPasswordStrength'

export default {
  components: {
    scPasswordStrength
  },
  data() {
    return {
      form: {
        userPassword: "",
        newPassword: "",
        confirmNewPassword: ""
      },
      rules: {
        userPassword: [
          { required: true, message: '请输入当前密码'}
        ],
        newPassword: [
          { required: true, message: '请输入新密码'}
        ],
        confirmNewPassword: [
          { required: true, message: '请再次输入新密码'},
          {validator: (rule, value, callback) => {
            if (value !== this.form.newPassword) {
              callback(new Error('两次输入密码不一致'));
            }else{
              callback();
            }
          }}
        ]
      }
    }
  },
  methods: {
    save(){
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$alert("密码修改成功，是否跳转至登录页使用新密码登录", "修改成功", {
            type: 'success',
            center: true
          }).then(() => {
            this.$router.replace({
              path: '/login'
            })
          }).catch(() => {})
        }else{
          return false
        }
      })
    }
  }
}
</script>

<style>
</style>
